<#include "template/template.ftl"/>
<@template _title="选课"
_css=["//cdn.bootcss.com/datatables/1.10.15/css/dataTables.bootstrap.min.css"]>
<div class="row" id="chooseCourse">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="form-inline">
                <div class="form-group">
                    <label class="control-label">课程类别:</label>
                    <select id="category_select" class="form-control" v-model="selectCourseCategory"
                            @change="chooseCourseCategory">
                        <option value="0">==请选择==</option>
                        <option v-for="cc in courseCategoryList" :value="cc.id" v-text="cc.id"></option>
                    </select>
                </div>
                <a href="javascript:;" class="btn btn-primary" role="button" @click="showCourseList"
                   v-show="!refreshing && showList">刷新选课列表</a>
            </div>
        </div>
        <div class="alert alert-danger" style="display: none" onclick="$(this).hide();">
            <a class="close" href="#" aria-hidden="true">&times;</a>
            <strong>{{ msg }}</strong>
        </div>
        <hr/>
        <div class="panel-body">
            <table class="table table-striped table-bordered table-hover" v-show="showList">
                <thead>
                <tr role="row">
                    <th class="col-md-1 col-xs-2">任课老师</th>
                    <th class="col-md-3 col-xs-3">教学班名称</th>
                    <th class="col-md-3 col-xs-3">上课时间</th>
                    <th class="col-md-1 col-xs-1">总</th>
                    <th class="col-md-1 col-xs-1">剩</th>
                    <th class="col-md-1 col-xs-1">分</th>
                    <th class="col-md-1 col-xs-1">操作</th>
                </tr>
                </thead>
                <tbody>
                <!--<tr v-for="(c, index) in courseList" :class="{ info: c.Xkrl>0, warning: c.Xkrl<20, danger: c.Xkrl<0 }">
                    <td>{{ c.RkLs }}</td>
                    <td>{{ c.Jxb }}</td>
                    <td>{{ c.Sksj }}</td>
                    <td>{{ c.MaxRs }}</td>
                    <td>{{ c.Xkrl }}</td>
                    <td>{{ c.Zxf }}</td>
                </tr>-->
                </tbody>
            </table>
        </div>
    </div>
</div>

<#assign _pagejs>
<script src="//cdn.bootcss.com/vue-resource/1.3.3/vue-resource.min.js"></script>
<script src="//cdn.bootcss.com/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="//cdn.bootcss.com/datatables/1.10.15/js/dataTables.bootstrap.min.js"></script>

<script src="${base}/assets/js/chooseCourse.js"></script>
</#assign>
</@template>